<template>
  <div class="app-main-container">
    <div class="doumee-filter">
      <el-form inline label-suffix="：" @submit.native.prevent>
        <el-form-item :label="$t('message.dyjbh')">
          <el-input v-model="filters.sn" :placeholder="$t('message.qsr') + $t('message.dyjbh')" clearable />
        </el-form-item>
        <el-form-item :label="$t('message.dyjmc')">
          <el-input v-model="filters.name" :placeholder="$t('message.qsr') + $t('message.dyjmc')" clearable />
        </el-form-item>
        <el-form-item :label="$t('message.status')">
          <el-select v-model="filters.status" :placeholder="$t('message.xzxlkgzt')" clearable>
            <el-option
              v-for="item in openStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick type="primary" @click="getList(1)">{{ $t('message.cz') }}</el-button>
          <el-button v-preventReClick @click="clear">{{ $t('message.clear') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="active" @tab-click="handleClick">
      <el-tab-pane
        v-for="(model, index) in manufacturerList"
        :key="index"
        :label="model.manufacturer"
        :name="index.toString()"
      >
        <div class="doumee-filter manufacturer">
          <el-button v-preventReClick type="primary" @click="addDevice">{{ $t('message.add') }}</el-button>
          <div class="detail" @click="manufacturerDetail(model.id)"><i class="el-icon-warning-outline" /> {{ $t('message.cssm') }}</div>
        </div>
      </el-tab-pane>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column align="center" :label="$t('message.dyjbh')" prop="code" min-width="200" />
        <el-table-column align="center" :label="$t('message.dyjmc')" prop="name" min-width="200" />
        <!-- <el-table-column align="center" :label="$t('message.sbcs')" prop="makeName" min-width="200" /> -->
        <!-- <el-table-column align="center" :label="$t('message.jmmy')" prop="code" width="200" /> -->
        <el-table-column align="center" :label="$t('message.status')" min-width="80" fixed="right">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="'0'"
              :inactive-value="'1'"
              @change="toConfigUpdate($event, scope.row.id, scope.row.status)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('message.createTime')" prop="creaDate" min-width="200" />
        <el-table-column :label="$t('message.caozuo')" align="center" fixed="right" min-width="100">
          <template slot-scope="scope">
            <div class="flex-cc">
              <el-button v-preventReClick type="text" @click="toEdit(scope.row)">{{ $t('message.edit') }}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-tabs>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />

    <el-dialog :title="$t('message.dyjgl')" :visible.sync="dialogTableVisible" width="600px" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <el-form
        ref="newPrinter"
        class="doumee-form"
        :model="newPrinter"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item :label="$t('message.dyjmc')" prop="name">
          <el-input
            v-model="newPrinter.name"
            class="input-style"
            :placeholder="$t('message.qsr') + $t('message.dyjmc')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.dyjbh')" prop="sn">
          <el-input
            v-model="newPrinter.sn"
            class="input-style"
            :placeholder="$t('message.qsr') + $t('message.dyjbh')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.dylx')" prop="useType">
          <el-select v-model="newPrinter.useType" multiple :placeholder="$t('message.qxz') + $t('message.dylx')" style="width: 100%">
            <el-option
              v-for="item in useTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="save">{{ $t('message.baocun') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { manufacturerList, manufacturerDetail, printerAdd, printerEdit, printerList, printerStatus } from '@/api'
import { parseTime } from '@/utils'
import store from '@/store'
export default {
  name: 'Devicec',
  data() {
    return {
      modalDialog: store.getters.dialog,
      subLoading: false,
      active: '0',
      swiperOptions: {
        slidesPerView: 'auto',
        pagination: {
          el: '.swiper-pagination'
        }
      },
      pagination: {
        page: 1,
        rows: 10
      },
      dialogTableVisible: false,
      totalCount: 10,
      list: [],
      listLoading: true,
      openStatus: [
        { value: '0', label: this.$t('message.qy') },
        { value: '1', label: this.$t('message.jy') }
      ],
      useTypes: [
        { value: '0', label: this.$t('message.cpdy') },
        { value: '1', label: this.$t('message.dddy') }
      ],
      deviceStatus: [
        { value: '1', label: this.$t('message.qy') },
        { value: '0', label: this.$t('message.jy') }
      ],
      areaList: [],
      manufacturerList: [],
      filters: {},
      newPrinter: {
        useType: []
      },
      rules: {
        name: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.dyjmc'), trigger: 'blur' }
        ],
        sn: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.dyjbh'), trigger: 'blur' }
        ],
        manufacturerId: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.chanshan'), trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.listLoading = false
    this.initData()
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    handleClick() {
      this.getList(1)
    },
    toConfigUpdate(e, id, status) {
      this.listLoading = true
      printerStatus({ param: { id, status }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.xgcg'))
        }
        this.getList(1)
      }).catch(() => {
        this.listLoading = false
      })
    },
    addDevice() {
      this.newPrinter = {
        manufacturerId: this.manufacturerList[this.active].id,
        useType: []
      }
      this.dialogTableVisible = true
    },
    toEdit(item) {
      this.newPrinter = {
        id: item.id,
        sn: item.code,
        name: item.name,
        manufacturerId: item.make,
        useType: item.useType ? item.useType.split(',') : []
      }
      this.dialogTableVisible = true
    },
    initData() {
      manufacturerList({ param: { type: 1 }}).then(res => {
        if (res.errorCode === '000000') {
          this.manufacturerList = res.recordList
          this.getList(1)
        }
      }).catch(err => {
        console.log(err)
      })
      // manufacturerDetail()
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      printerList({ pagination, gymId: sessionStorage.getItem('venueId'), param: { venueId, manufacturerId: this.manufacturerList[this.active].id, ...filters }}, sessionStorage.getItem('venueId')).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.totalCount = res.totalCount
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    clear() {
      this.filters = {}
      this.getList()
    },
    cancel() {
      this.dialogTableVisible = false
    },
    save() {
      this.$refs.newPrinter.validate((valid) => {
        if (valid) {
          this.subLoading = true
          if (this.newPrinter.id) {
            const param = {}
            param.name = this.newPrinter.name
            param.sn = this.newPrinter.sn
            param.manufacturerId = this.newPrinter.manufacturerId
            param.venueId = sessionStorage.getItem('venueId')
            param.id = this.newPrinter.id
            param.useType = this.newPrinter.useType.join(',')
            printerEdit({ param }, sessionStorage.getItem('venueId')).then(res => {
              this.subLoading = false
              // console.log(res)
              if (res.errorCode === '000000') {
                this.getList(1)
                this.dialogTableVisible = false
              }
            }).catch(err => {
              this.subLoading = false
              console.log(err)
            })
          } else {
            const param = {}
            param.make = this.newPrinter.manufacturerId
            param.useType = this.newPrinter.useType.join(',')
            param.venueId = sessionStorage.getItem('venueId')
            param.items = [{ name: this.newPrinter.name, sn: this.newPrinter.sn }]
            printerAdd({ param }, sessionStorage.getItem('venueId')).then(res => {
              // console.log(res)
              this.subLoading = false
              if (res.errorCode === '000000') {
                this.getList(1)
                this.dialogTableVisible = false
              }
            }).catch(err => {
              this.subLoading = false
              console.log(err)
            })
          }
        } else {
          this.$alert(this.$t('message.qxwssbxx'), this.$t('message.cw'))
        }
      })
    },
    manufacturerDetail(id) {
      manufacturerDetail({ param: { manufacturerId: this.manufacturerList[this.active].id }}, sessionStorage.getItem('venueId')).then(res => {
        // console.log(res)
        if (res.errorCode === '000000') {
          const cont = res.record.manufacturer + res.record.text.replace(/\n/g, '<br/>')
          this.$alert(cont, this.$t('message.cssm'), {
            dangerouslyUseHTMLString: true
          })
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
